<!DOCTYPE html>
<html>

<head>
    <title>布局</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <style type="text/css">
        .logisticscenter_xq {
            position: absolute;
            width: 710px;
            border: solid 2px #787878;
            background: #edfcfe;
            z-index: 2;
        }
    </style>
</head>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    // 弹窗
    function showWindow() {
        $('#showdiv').show();  //显示弹窗
        $('#cover').css('display', 'block'); //显示遮罩层
        $('#cover').css('height', document.body.clientHeight + 'px'); //设置遮罩层的高度为当前页面高度
    }
    // 关闭弹窗
    function closeWindow() {
        $('#showdiv').hide();  //隐藏弹窗
        $('#cover').css('display', 'none');   //显示遮罩层
    }
    window.onload = function () {
        //
        backTopObj = document.getElementById("backTop");
        backTopObj.onclick = function () {
            showWindow('js弹窗 js弹出DIV,并使整个页面背景变暗'); 
        }

    }
</script>

<body>
    <!-- 遮罩层 -->
    <div id="cover"
        style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.6; display: none; z-index: 2 ">

    </div>
    <!-- 弹窗 -->
    <div id="showdiv"
        style="width: 80%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 40%; left: 10%; z-index: 3; background: #fff">
        <!-- 标题 -->
        <div
            style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;">
            提示
        </div>
        <!-- 内容 -->
        <div style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">
            js弹窗 js弹出DIV,并使整个页面背景变暗</div>
        <!-- 按钮 -->
        <div style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;"
            onclick="closeWindow()">
            确 定
        </div>
    </div>
    <div style="height: 3000px;background-color: aqua;width: 100%;">
     <button id="backTop">
      123456
     </button>
    </div>
</body>

</html>